<div #collapse3 class="collapse3">
  <nz-collapse [nzBordered]="false">
    <nz-collapse-panel *ngFor="let panel of panel3"
                       [nzHeader]="panel.name" [nzActive]="panel.active">
      <nz-table #filterTable [nzData]="studentGPA" nzTableLayout="fixed" [nzLoading]="loading">
        <thead>
        <tr>
          <th
            *ngFor="let column of listOfColumns"
            [nzSortOrder]="column.sortOrder"
            [nzSortFn]="column.sortFn"
            [nzSortDirections]="column.sortDirections"
            [nzFilterMultiple]="column.filterMultiple"
            [nzFilters]="column.listOfFilter"
            [nzFilterFn]="column.filterFn"
          >
            {{ column.name }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of filterTable.data">
          <td>{{ data.stuid }}</td>
          <td>{{ data.name }}</td>
          <td>{{ data.major }}</td>
          <td>{{ data.class }}</td>
          <td>{{ data.totalCredits }}</td>
          <td>{{ data.GPA.toFixed(4)}}</td>
        </tr>
        </tbody>
      </nz-table>
    </nz-collapse-panel>
  </nz-collapse>
</div>
<div #collapse3 class="collapse4">
  <nz-collapse [nzBordered]="false">
    <nz-collapse-panel *ngFor="let panel of panel4"
                       [nzHeader]="panel.name" [nzActive]="panel.active">
      <div echarts [options]="option" class="demo-chart"></div>
    </nz-collapse-panel>
  </nz-collapse>
</div>


